<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>第一个页面</title>
		<!-- 设置手机端全屏显示，不允许出现滚动条  -->
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
		<meta name="format-detection" content="telphone=no, email=no" />
		
		<!--  引入图标文件  -->
		<link rel="stylesheet" type="text/css" href="../../svg/font.css" />
		<!--   样式加载    -->
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<style type="text/css">
			.load {
				border-radius: 50%;
				font-size: 10px;
				text-indent: -99999em;
				margin: 20px auto;
				position: relative;
				width: 8em;
				height: 8em;
				box-shadow: inset 0 0 0 1em red;
			}
			
			.load:before,
			.load:after {
				border-radius: 50%;
				position: absolute;
				content: '';
				width: 4.2em;
				height: 8.2em;
				background: #fff;
				border-radius: 0;
			}
			
			.load:before {
				border-radius: 8.2em 0 0 8.2em;
				top: -0.1em;
				left: -0.1em;
				-webkit-transform-origin: 4.2em 4.1em;
				transform-origin: 4.2em 4.1em;
				-webkit-animation: load2 2s infinite ease 1.5s;
				animation: load2 2s infinite ease 1.5s;
			}
			
			.load:after {
				border-radius: 0 8.2em 8.2em 0;
				top: -0.1em;
				left: 4.1em;
				-webkit-transform-origin: 0 4.1em;
				transform-origin: 0 4.1em;
				-webkit-animation: load2 2s infinite ease;
				animation: load2 2s infinite ease;
			}
			
			@-webkit-keyframes load2 {
				0% {
					-webkit-transform: rotate(0deg);
					transform: rotate(0deg);
				}
				100% {
					-webkit-transform: rotate(360deg);
					transform: rotate(360deg);
				}
			}
			
			@keyframes load2 {
				0% {
					-webkit-transform: rotate(0deg);
					transform: rotate(0deg);
				}
				100% {
					-webkit-transform: rotate(360deg);
					transform: rotate(360deg);
				}
			}
		</style>
	</head>

	<body>
		<div class="one">
			<div class="load">

			</div>
		</div>
	</body>

</html>